<template>
  <div>
    <el-popover :visible="visible" title="生成 cron" trigger="click" :width="580">
      <template #reference>
        <el-input v-model="inputCronValue" placeholder="" clearable class="cron-input">
          <template #append>
            <el-button :icon="Plus" @click="openPopover" />
          </template>
        </el-input>
      </template>
      <span>
        <div>
          <cornTab v-model:cronValue="cronValue"></cornTab>
        </div>
        <div>
          <el-row>
            <el-col :span="24">
              <el-card class="grid-content">
                <div class="text item">结果</div>
              </el-card></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <div class="text item">{{ cronValue }}</div>
              </el-card></el-col
            >
          </el-row>
        </div>
        <div style="text-align: right; margin-top: 5px">
          <el-button type="primary" size="small" @click="confirm"> 确定 </el-button>
          <el-button type="default" size="small" @click="unConfirm"> 取消 </el-button>
        </div>
      </span>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
import cornTab from '@/components/cron/CronTab.vue'
import { Plus } from '@element-plus/icons-vue'
const visible = ref(false)
const cronValue = ref('')
const inputCronValue = ref('')
const emit = defineEmits(['update:cron'])
let props = defineProps(['cron'])
onMounted(() => {
  inputCronValue.value = props.cron
  cronValue.value = props.cron
})
const openPopover = () => {
  if (!visible.value) {
    visible.value = true
    cronValue.value = props.cron
  }
}
const confirm = () => {
  visible.value = false
  //确定后回传的值
  emit('update:cron', cronValue.value)
  inputCronValue.value = cronValue.value
}
const unConfirm = () => {
  visible.value = false
  //确定后回传的值
  // emit('update:cron', cronValue.value)
  // inputCronValue.value = ''
}
</script>
<style lang="scss" scoped>
.el-col {
  margin: 5px;
  .grid-content {
    background-color: aquamarine;
    margin-top: 6px;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 5px;
  }
  .el-card {
    border-radius: 10px;
  }
}
</style>
